<template>
  <view class="template-login">
    <tn-nav-bar fixed>找回密码</tn-nav-bar>
    
    <view class="login">
     <view class="login__top">
     	<view :class="currentModeIndex==0?'login__top__left login__top__active':'login__top__left'" @click="currentModeIndex = 0">
     		1.验证手机号码
     	</view>
		<view class="login__top__icon">
			<text class="tn-icon-right"></text>
		</view>
     	<view  :class="currentModeIndex==1?'login__top__right login__top__active':'login__top__right'">
     		2.设置新密码
     	</view>
     </view>
	 <view class="login__body">
	 	<view class="" v-if="currentModeIndex == 0">
	 		<view class="login__body__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
	 		  <view class="login__body__item__input__left-icon">
	 		    <view class="tn-icon-phone"></view>
	 		  </view>
	 		  <view class="login__body__item__input__content">
	 		    <input maxlength="20" placeholder-class="input-placeholder" placeholder="请输入登录手机号码" />
	 		  </view>
	 		</view>
	 		
	 		<view class="login__body__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
	 		  <view class="login__body__item__input__left-icon">
	 		    <view class="tn-icon-statistics"></view>
	 		  </view>
	 		  <view class="login__body__item__input__content">
	 		    <input placeholder-class="input-placeholder" placeholder="请输入验证码" />
	 		  </view>
	 		  <view class="login__body__item__input__right-icon" @click="changeYZM">
	 			  <image class="login__body__item__input__right-image" src="../../static/tabbar/home_tnnew.png" mode="widthFix"></image>
	 		  </view>
	 		</view>
	 	</view>
		<view class="" v-if="currentModeIndex == 1">
			<view class="login__body__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
			  <view class="login__body__item__input__left-icon">
			    <view class="tn-icon-phone"></view>
			  </view>
			  <view class="login__body__item__input__content">
			    <input maxlength="20" placeholder-class="input-placeholder" placeholder="请设置6-20位新的登录密码" />
			  </view>
			</view>
			
			<view class="login__body__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
			  <view class="login__body__item__input__left-icon">
			    <view class="tn-icon-phone"></view>
			  </view>
			  <view class="login__body__item__input__content">
			    <input maxlength="20" placeholder-class="input-placeholder" placeholder="请再次输入新的登录密码" />
			  </view>
			</view>
		</view>
		
		<view class="login__body__item__button tn-cool-bg-color-7--reverse" hover-class="tn-hover" :hover-stay-time="150" @click="goNextStep">{{ currentModeIndex === 0 ? '下一步' : '确认提交'}}</view>
		
	 </view>
    </view>
  </view>
</template>

<script>
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
  export default {
    name: 'login-pwd-1',
    mixins: [template_page_mixin],
    data() {
      return {
        // 当前选中的模式
        currentModeIndex: 0,
      }
    },
    watch: {
      currentModeIndex(value) {
		  
      }
    },
    methods: {
      // 切换模式
      modeSwitch(index) {
        this.currentModeIndex = index
        this.showPassword = false
      },
      // 获取验证码
      getCode() {
        if (this.$refs.code.canGetCode) {
          this.$t.message.loading('正在获取验证码')
          setTimeout(() => {
            this.$t.message.closeLoading()
            this.$t.message.toast('验证码已经发送')
            // 通知组件开始计时
            this.$refs.code.start()
          }, 2000)
        } else {
          this.$t.message.toast(this.$refs.code.secNum + '秒后再重试')
        }
      },
	  changeYZM(){
		  
	  },
	  goNextStep(){
		  if(this.currentModeIndex == 0){
			  this.currentModeIndex = 1;
		  }else{
			  
		  }
	  },
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/static/css/templatePage/custom_nav_bar.scss';
  .template-login{
  }
  .login{
	  position: fixed;
	  top: 45px;
	  right: 0;
	  bottom: 0;
	  left: 0;
	  background-color: rgba(245, 245, 245, 0.5);
	  
	  &__top{
		  position: absolute;
		  width: 100%;
		  height: 90rpx;
		  line-height: 90rpx;
		  border-top: 1rpx solid #eeeeee;
		  background-color: #FFFFFF;
		  &__left{
			  width: 50%;
			  float: left;
			  text-align: center;
		  }
		  &__right{
			  width: 50%;
			  float: right;
			  text-align: center;
		  }
		  &__active{
			  color: #01beff;
		  }
		  &__icon{
			  width: 90rpx;
			  height: 90rpx;
			  position: absolute;
			  left: 49%;
		  }
	  }
	  &__body{
		position: absolute; 
		width: 100%;
		top: 100rpx;
		padding: 0 5%;
		 &__item {
		   
		   &__input {
		     margin-top: 59rpx;
		     width: 100%;
		     height: 77rpx;
		     border: 1rpx solid #E6E6E6;
		     border-radius: 39rpx;
		     
		     &__left-icon {
		       width: 10%;
		       font-size: 44rpx;
		       margin-left: 20rpx;
		       color: #AAAAAA;
		     }
		     
		     &__content {
		       width: 80%;
		       padding-left: 10rpx;
		       
		       &--verify-code {
		         width: 56%;
		       }
		       
		       input {
		         font-size: 24rpx;
		         // letter-spacing: 0.1em;
		       }
		     }
		     
		     &__right-icon {
		       width: 10%;
		       font-size: 44rpx;
		       margin-right: 20rpx;
		       color: #AAAAAA;
		     }
		     &__right-image{
				 width: 100%;
				 max-height: 80rpx;
			 }
		     &__right-verify-code {
		       width: 34%;
		       margin-right: 20rpx;
		     }
		   }
		   
		   &__button {
		     margin-top: 75rpx;
		     margin-bottom: 39rpx;
		     width: 100%;
		     height: 77rpx;
		     text-align: center;
		     font-size: 31rpx;
		     font-weight: bold;
		     line-height: 77rpx;
		     letter-spacing: 1em;
		     text-indent: 1em;
		     border-radius: 39rpx;
		     box-shadow: 1rpx 10rpx 24rpx 0rpx rgba(60, 129, 254, 0.35);
		   }
		}
	  }
  }
  
  .fl{
	  float: left;
  }
  .fr{
	  float: right;
  }
</style>
